<template>
  <div class="body">
    <!-- 标题部分 -->
    <woco></woco>
    
    <!-- 轮播 -->

    <el-carousel :interval="5000" arrow="always" class="roat" height="500px">
      <el-carousel-item
        v-for="(item, index) in roatdata"
        :key="index"
        class="roat-cont"
      >
        <img :src="item.imgcont" width="100%" height="100%" class="roat-img" />
      </el-carousel-item>
    </el-carousel>
    <!-- 公司简介 -->
    <div class="introduce">
      <div class="intro-img">
        <img src="./images/int_left.jpg" alt="" width="100%" height="100%" />
      </div>
      <div class="intro-cont">
        <h3>
          维佳急聘大批优秀家政服务人员，管家，月嫂，育婴师，早教师，高端家政
        </h3>
        <p>
          一经录用，待遇优厚，月薪资8000-35000看能力定，更有免费学习机会。想提升自己
          ，想挣高薪，想体验高端，维佳是你更好的选择。咨询热线 400-823-8855
        </p>
        <p v-for="(item, index) in adata" :key="index" class="adata">
          {{ item.acont }}
        </p>
      </div>
      <div class="intro-img">
        <img
          src="./images/int_right1.jpg"
          alt=""
          width="100%"
          height="70%"
        /><br />
        <div class="int-right">
          <img src="./images/int_right2.jpg" alt="" width="33%" height="30%" />
          <img src="./images/int_right3.jpg" alt="" width="33%" height="30%" />
          <img src="./images/int_right4.jpg" alt="" width="33%" height="30%" />
        </div>
      </div>
    </div>
    <!-- 跳转到公司详情页 -->
    <div class="serve">
      <h2>热门服务</h2>
      <ul class="serve-list">
        <li v-for="(item, index) in serdata" :key="index">
          <img :src="item.serfont" alt="" width="50%" height="80%" class="ser-img" /><br />
          <span>{{ item.sercont }}</span>
        </li>
      </ul>
    </div>
    <!-- 金牌阿姨简介 -->
    <div class="aunt">
      <h2>金牌服务</h2>
      <div class="aunt-div">
        <div class="aunt_left">
          <img src="./images/aunt_left.jpg" alt="" width="100%" height="100%" />
          <div class="aunt_cont">
            <span>金牌月嫂</span>
            <span>高级育婴师</span>
            <span>蒙特梭利早教师</span>
          </div>
          <div class="aunt_buttom">
            <div>培训上岗</div>
            <div>高端服务</div>
          </div>
        </div>
        <ul class="aunt-list">
          <li v-for="(item, index) in auntdata" :key="index">
            <img :src="item.auntimg" alt="" width="100%" height="100%" />
            <div class="hid">
              <p class="hid-p">详情介绍</p>
              <p class="hid-p">金牌月嫂</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 活动，合伙人，荣誉 -->
    <div class="container">
      <div class="container-title">
        <span class="lable" @mouseenter="act1">活动</span>
        <span class="lable" @mouseenter="partner1">合伙人</span>
        <span class="lable" @mouseenter="honner1">荣耀</span>
      </div>
      <ul class="actlist" v-show="act">
        <li v-for="(item, index) in actdata" :key="index" class="actlist-img">
          <img :src="item.actimg" alt="" width="100%" height="100%" />
          <div class="act-div">
            <!-- <p>{{ item.actcont }}</p> -->
          </div>
        </li>
      </ul>
      <ul class="partnerlist" v-show="partner">
        <li
          v-for="(item, index) in partnerdata"
          :key="index"
          class="partnerlist-img"
        >
          <img :src="item.partnerimg" alt="" width="100%" height="100%" />
          <div class="partner-div">
            <!-- <p>{{ item.partnercont }}</p> -->
          </div>
        </li>
      </ul>
      <ul class="honorlist" v-show="honor">
        <li
          v-for="(item, index) in honordata"
          :key="index"
          class="honorlist-img"
        >
          <img :src="item.honorimg" alt="" width="100%" height="100%" />
          <div class="honor-div">
            <!-- <p>{{ item.honorcont }}</p> -->
          </div>
        </li>
      </ul>
    </div>
    <!-- 脚部 -->
    <div class="footer">
      <h2 class="foot-title">为什么那么多高端家庭选择伍仁行?</h2>
      <div class="foot-div">
        <div
          v-for="(item, index) in footdata"
          :key="index"
          class="foot-div-cont"
        >
          {{ item.footcont }}
        </div>
      </div>
    </div>
    <commenfooter />
    <!-- 回到顶部 -->
    <div class="backtop" @click="backTop">
      <i class="el-icon-arrow-up"></i>
    </div>
  </div>
</template>


<script>
import commenfooter from "../filsh/commenfooter";
import woco from './Nav'
export default {
  name: "HelloWorld",
  components: {
    commenfooter,
    woco
  },
  props: {
    msg: String,
  },
  data() {
    return {
     
 
     
      roatdata: [
        { id: "1", imgcont: require("./images/banner1.png") },
        { id: "2", imgcont: require("./images/banner2.png") },
      ],
      serdata: [
        { id: "1", sercont: "保洁", serfont: require("./images/1_icon.png") },
        { id: "2", sercont: "保姆", serfont: require("./images/2_icon.png") },
        { id: "3", sercont: "育儿嫂", serfont: require("./images/3_icon.png") },
        { id: "4", sercont: "月嫂", serfont: require("./images/4_icon.png") },
        {
          id: "5",
          sercont: "新居开荒",
          serfont: require("./images/5_icon.png"),
        },
        {
          id: "5",
          sercont: "油烟机清扫",
          serfont: require("./images/6_icon.png"),
        },
        {
          id: "5",
          sercont: "空调清洗",
          serfont: require("./images/7_icon.png"),
        },
        {
          id: "5",
          sercont: "深度除螨",
          serfont: require("./images/8_icon.png"),
        },
        {
          id: "5",
          sercont: "厨房保养",
          serfont: require("./images/9_icon.png"),
        },
        {
          id: "5",
          sercont: "卫生间保养",
          serfont: require("./images/10_icon.png"),
        },
      ],
      auntdata: [
        {
          id: "1",
          auntcont: "哈哈",
          auntimg: "http://www.vagehome.com/vageimages/shouyeyuesao01.jpg",
        },
        {
          id: "2",
          auntcont: "哈哈",
          auntimg: "http://www.vagehome.com/vageimages/shouyeyuesao02.jpg",
        },
        {
          id: "3",
          auntcont: "哈哈",
          auntimg: "http://www.vagehome.com/vageimages/shouyeyuesao03.jpg",
        },
        {
          id: "6",
          auntcont: "哈哈",
          auntimg: "http://www.vagehome.com/vageimages/shouyeyuesao04.jpg",
        },
        {
          id: "7",
          auntcont: "哈哈",
          auntimg: "http://www.vagehome.com/vageimages/shouyeyuesao05.jpg",
        },
        {
          id: "8",
          auntcont: "哈哈",
          auntimg: "http://www.vagehome.com/vageimages/shouyeyuesao06.jpg",
        },
      ],
      adata: [
        { id: "1", acont: "2021遇见美好~ 维佳“放心家政员”为您保驾护航！" },
        {
          id: "2",
          acont: "在了解会阴护理时，高级住家保姆可能需要了解会阴的几种疼痛",
        },
        { id: "3", acont: "育儿有方法 你问海淀区育儿嫂公司来答" },
      ],
      actdata: [
        {
          id: "1",
          actcont: "哈哈",
          actimg: "http://www.vagehome.com/vageimages/shouyehhr1.jpg",
        },
        {
          id: "2",
          actcont: "哈哈",
          actimg: "http://www.vagehome.com/vageimages/shouyehd22.jpg",
        },
        {
          id: "3",
          actcont: "哈哈",
          actimg: "http://www.vagehome.com/vageimages/2020101002.jpg",
        },
        {
          id: "4",
          actcont: "哈哈",
          actimg: "http://www.vagehome.com/vageimages/2020101003.jpg",
        },
        {
          id: "5",
          actcont: "哈哈",
          actimg: "http://www.vagehome.com/vageimages/shouyehd5.jpg",
        },
        {
          id: "6",
          actcont: "哈哈",
          actimg: "http://www.vagehome.com/vageimages/2020101001.jpg",
        },
      ],
      partnerdata: [
        {
          id: "1",
          partnercont: "哈哈",
          partnerimg: "http://www.vagehome.com/vageimages/shouyehhr1.jpg",
        },
        {
          id: "2",
          partnercont: "哈哈",
          partnerimg: "http://www.vagehome.com/vageimages/shouyehhr2.jpg",
        },
        {
          id: "3",
          partnercont: "哈哈",
          partnerimg: "http://www.vagehome.com/vageimages/shouyehhr3.jpg",
        },
        {
          id: "4",
          partnercont: "哈哈",
          partnerimg: "http://www.vagehome.com/vageimages/shouyehhr4.jpg",
        },
        {
          id: "5",
          partnercont: "哈哈",
          partnerimg: "http://www.vagehome.com/vageimages/shouyehd2.jpg",
        },
        {
          id: "6",
          partnercont: "哈哈",
          partnerimg: "http://www.vagehome.com/vageimages/shouyehhr6.jpg",
        },
      ],
      honordata: [
        {
          id: "1",
          honorcont: "哈哈",
          honorimg: "http://www.vagehome.com/vageimages/shouyerongyu1.jpg",
        },
        {
          id: "2",
          honorcont: "哈哈",
          honorimg: "http://www.vagehome.com/vageimages/shouyerongyu4.jpg",
        },
        {
          id: "3",
          honorcont: "哈哈",
          honorimg: "http://www.vagehome.com/vageimages/shouyerongyu5.jpg",
        },
        {
          id: "4",
          honorcont: "哈哈",
          honorimg: "http://www.vagehome.com/vageimages/shouyerongyu7.jpg",
        },
        {
          id: "5",
          honorcont: "哈哈",
          honorimg: "http://www.vagehome.com/vageimages/shouyerongyu8.jpg",
        },
        {
          id: "6",
          honorcont: "哈哈",
          honorimg: "http://www.vagehome.com/vageimages/shouyerongyu9.jpg",
        },
      ],
      footdata: [
        { id: "1", footcont: "经验" },
        { id: "2", footcont: "口碑" },
        { id: "3", footcont: "高端" },
        { id: "4", footcont: "规模" },
        { id: "5", footcont: "专业" },
      ],
      act: true,
      partner: false,
      honor: false,
    };
  },
  
  methods: {
    

    act1() {
      this.act = true;
      this.partner = false;
      this.honor = false;
    },
    partner1() {
      this.act = false;
      this.partner = true;
      this.honor = false;
    },
    honner1() {
      this.act = false;
      this.partner = false;
      this.honor = true;
    },
    backTop() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
   
   
  },
 
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  text-align: center;
}

/* 轮播图 */
.roat {
  width: 80%;
  /* height: 500px; */
  margin: -40px auto 0;
}
/* .roat-cont{
  height: 500px;
} */
.el-carousel__item .roat-img {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

/* 公司简介 */
.introduce {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px auto 0;
}
.intro-img {
  width: 20%;
  /* height: 100px; */
}
.int-right {
  display: flex;
  justify-content: space-between;
}
.intro-cont {
  width: 50%;
}
.intro-cont > h3 {
  text-align: center;
  color: #f59c7f;
  margin-bottom: 20px;
}
.intro-cont > p {
  text-indent: 2rem;
  font-size: 20px;
  margin-bottom: 20px;
  text-align: left;
}
.adata {
  cursor: pointer;
  font-size: 6px;
}

/* 公司详情页跳转 */
.serve {
  width: 80%;
  margin: 100px auto;
  border-top: 1px solid transparent;
}
.serve > h2 {
  text-align: center;
  margin-bottom: 50px;
  /* font-size: 40px; */
}
.serve-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.serve-list > li {
  width: 18%;
  margin-bottom: 20px;
}
.ser-img{
  transition: all .4s;
}
.ser-img:hover{
  transform: scale(1.1);
  transition: all .4s;
}

/* 金牌阿姨 */
.aunt {
  width: 80%;
  margin: 50px auto;
}
.aunt > h2 {
  text-align: center;
  margin-bottom: 50px;
}
.aunt-list {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.aunt-list > li {
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 50px;
  width: 33%;
  height: 250px;
  position: relative;
}

.aunt-div {
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: row;
  justify-content: space-between;
}
.aunt-div > div {
  width: 30%;
  height: 430px;
}
.hid {
  position: absolute;
  width: 0px;
  height: 250px;
  top: 0;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: all 0.4s;
}
.aunt-list > li:hover .hid {
  width: 94%;
  transition: all 0.4s;
}
.hid-p {
  opacity: 0;
  /* margin-top: 20px; */
  color: white;
  width: 100px;
  height: 30px;
  margin: 50px auto 0;
  line-height: 30px;
  border-radius: 15px;
  border: 1px solid red;
  cursor: pointer;
}
.aunt-list > li:hover .hid-p {
  opacity: 1;
}

.hid-p:hover {
  background-color: yellowgreen;
  color: #cc3300;
}
.aunt_cont {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.aunt_cont > span {
  display: inline-block;
  border-left: 1px solid black;
  padding-left: 20px;
}
.aunt_cont > span:nth-of-type(1) {
  /* margin-left: 10px; */
  border-left: none;
  padding-left: 0px;
}
.aunt_buttom {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.aunt_buttom > div {
  background-color: #f0f0f0;
  width: 50%;
  border-left: 1px solid black;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 24px;
}
.aunt_buttom > div:nth-of-type(1) {
  border-left: none;
}
.aunt_buttom > div:hover {
  background-color: #653366;
  color: #ffcc56;
}

/* 活动，合伙人，荣耀 */
.container {
  width: 80%;
  margin: 50px auto 0;
}
.container-title {
  box-sizing: border-box;
  /* padding-bottom: 20px; */
  border-bottom: 2px solid black;
}
.lable {
  box-sizing: border-box;
  display: inline-block;
  margin-left: 30px;
  font-size: 30px;
  font-weight: 500;
  height: 60px;
  color: #ff7742;
  padding-bottom: 10px;
}
.lable:hover {
  border-bottom: 2px solid #ff7742;
}
/* act */
.actlist {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.actlist-img {
  width: 30%;
  object-fit: contain;
  height: 200px;
  margin-bottom: 30px;
  position: relative;
}
.act-div {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #e28e3e;
  transition: all 0.4s;
}
.actlist-img:hover .act-div {
  width: 100%;
  height: 200px;
  transition: all 0.4s;
}
.act-div > p {
  margin-top: 90px;
  text-align: center;
  opacity: 0;
}
.actlist-img:hover .act-div > p {
  opacity: 1;
}
/* partner */
.partnerlist {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.partnerlist-img {
  width: 30%;
  height: 200px;
  margin-bottom: 30px;
  position: relative;
}
.partner-div {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #e28e3e;
  transition: all 0.4s;
}
.partnerlist-img:hover .partner-div {
  width: 100%;
  height: 200px;
  transition: all 0.4s;
}
.partner-div > p {
  margin-top: 90px;
  text-align: center;
  opacity: 0;
}
.partnerlist-img:hover .partner-div > p {
  opacity: 1;
}
/* honor*/
.honorlist {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.honorlist-img {
  width: 30%;
  height: 200px;
  margin-bottom: 30px;
  position: relative;
}
.honor-div {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #e28e3e;
  transition: all 0.4s;
}
.honorlist-img:hover .honor-div {
  width: 100%;
  height: 200px;
  transition: all 0.4s;
}
.honor-div > p {
  margin-top: 90px;
  text-align: center;
  opacity: 0;
}
.honorlist-img:hover .honor-div > p {
  opacity: 1;
}

/* 脚部 */
.footer {
  width: 80%;
  margin: 50px auto 0;
  padding-bottom: 200px;
}
.foot-title {
  color: #ff6600;
  font-weight: normal;
  font-size: 30px;
  position: relative;
}
.foot-title::before {
  content: "";
  display: block;
  position: absolute;
  top: 20px;
  left: 50px;
  width: 300px;
  height: 2px;
  background-color: black;
}
.foot-title::after {
  content: "";
  display: block;
  position: absolute;
  top: 20px;
  right: 50px;
  width: 300px;
  height: 2px;
  background-color: black;
}
.foot-div {
  display: flex;
  margin-top: 50px;
}
.foot-div-cont {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  text-align: center;
  line-height: 100px;
  font-size: 20px;
  color: #ff6600;
  border: 1px solid #ff6600;
  margin-left: 100px;
}
.foot-div-cont:nth-of-type(1) {
  margin-left: 250px;
}
/* 回到顶部 */
.backtop {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  top: 50%;
  margin-top: -25px;
  background-color: skyblue;
  font-size: 30px;
  line-height: 50px;
  text-align: center;
}
</style>
